<template>
    <div class="detail">
<mt-header :title="Swipdetails.musicName">
<router-link to="/" slot="left">
<mt-button icon="back">返回</mt-button>
  </router-link>
</mt-header>
    <div class="d1">
           <img :src="Swipdetails.albumPicUrl" alt="" class="imgs">
           <h3>作者：{{Swipdetails.artistName}}</h3>
           <h3>名字：{{Swipdetails.albumName}}</h3>
           <h3>分类：{{Swipdetails.navigationName}}</h3>
           <audio :src="Swipdetails.musicMp3Url" controls class="mp3"></audio>
    </div>
    </div>
</template>
<script>
import url from "../tools/url"
import { Indicator } from 'mint-ui';
export default {
    name:"Swipdetail",
    data() {
        return {
            Swipdetails:{},
            selected:"轮播图详情页"
        }
    },
    methods: {
        add(){
            this.$store.commit("arrChange",this.details)
        }
    },
    mounted() {
        var id=this.$route.query.id;
        var str=`token=${sessionStorage.getItem("token")}&musicId=${id}`
        this.axios.post(url.CAROUSELBYID,str).then(pro=>{
            this.Swipdetails=pro.data.data
            Indicator.close();
        })
       
    },
    computed: {
    
    },
}
</script>
<style scoped>
.d1{
    text-align: center;
}
.imgs{
    width: 50%;
    border-radius: 50%;
}
.mp3{
    width: 100%;
}
</style>